<template>
	<view>
		<view class="flex" style="margin-bottom: 20rpx;">
			<uni-easyinput placeholder="地址信息" :disabled="true" v-model="address" />
		</view>
		<map id="map" class="map" min-scale="10" :scale="17" :show-location="true" :latitude="latitude" :longitude="longitude"
		 @regionchange="onRegionchange">
			<cover-image class="map-center-icon" src="/static/location-center.png"></cover-image>
		</map>
		<view class="flex" style="margin-top: 20rpx;">
			<uni-easyinput placeholder="搜索地址" v-model="addressSearch" />
			<button class="cu-btn bg-green margin-left-sm" @click="geocoder">搜索</button>
		</view>
	</view>
</template>

<script>
	let _mapCtx = null;
	const db = uniCloud.database();
	export default {
		data() {
			return {
				address: "",
				addressSearch: "",
				timer: false,
				latitude: 39.909,
				longitude: 116.39742,
				nearAddressList: []
			};
		},
		props: {
			location: {
				// 排列方向 row column
				type: Object,
				default: ()=>{}
			},
		},
		created() {
			_mapCtx = uni.createMapContext('map');
			if(this.location.latitude){
				this.latitude = this.location.latitude;
				this.longitude = this.location.longitude;
				this.address = this.location.address;
			}else{
				this.reverseGeocoder();
			}
		},
		methods: {
			//地图区域改变
			onRegionchange(e) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					//h5 end  安卓 regionchange
					if (e.type === 'end' || e.type === 'regionchange') {
						//中间位置
						_mapCtx.getCenterLocation({
							success: res => {
								this.latitude = res.latitude
								this.longitude = res.longitude
								this.reverseGeocoder();
							},
							fail: err => {
								console.log(err);
							}
						})
					}
				}, 500)
			},
			geocoder() {
				this.$request('utils/getAddressGeo', {
						address: this.addressSearch
					})
					.then(res => {
						console.log(res)
						this.latitude = res.location.lat;
						this.longitude = res.location.lng;
						this.reverseGeocoder();
					}).catch(err => {

					}).finally(err => {})
			},
			reverseGeocoder() {
				this.$request('utils/getLocationAddress', {
						fromLatlng: [this.latitude, this.longitude].join(",")
					})
					.then(res => {
						console.log(res)
						this.address = res.address;
						this.$emit('change', {
							address:res.address,
							latitude:this.latitude,
							longitude:this.longitude,
							location:new db.Geo.Point(this.longitude, this.latitude)
						});
					}).catch(err => {

					}).finally(err => {})
			},
		}
	}
</script>
"address": "",
					"latitude": null,
					"longitude": null,
					"location": null,
<style lang="scss">
	.map {
		width: 720rpx;
		height: 500rpx;
	}

	.map-center-icon {
		position: absolute;
		left: 324rpx;
		top: 214rpx;
		width: 72rpx;
		height: 72rpx;
	}
</style>
